<template>
	<view>

		<view class="goods_info u-flex">
			<view class="goods_img">
				<image src="https://shengtan.hwhsh.com/public/uploads/shop/_231817aa65f2003d2ca0e52c6e80e17a.png" mode="aspectFill"></image>
			</view>
			<view class="goods_name">
				<view class="shopname">9.9蛋糕捡漏</view>
				<view class="info_tags">
					<u-tag text="随机搭配" type="success" size="mini" bg-color="#FEFAE0" border-color="#FEFAE0" color="#685A00" />
				</view>
				<view class="dizhizu u-flex">老嫂子蛋糕店（杭州富阳店）</view>
			</view>
		</view>
		
		<view class="xingxing">
			<view class="xtitle">您对商家/捡漏满意么？</view>
			<view class="pingfen_box">
				<view class="fen1">评分</view>
				<view class="fen2">
					<l-starRate v-model="star1" :disabled="false"></l-starRate>
				</view>
				<view class="fen3">非常满意</view>
			</view>
			<view class="pingfen_box">
				<view class="fen1">评分</view>
				<view class="fen2">
					<l-starRate v-model="star2" :disabled="false"></l-starRate>
				</view>
				<view class="fen3">非常满意</view>
			</view>
			<view class="pingfen_box">
				<view class="fen1">评分</view>
				<view class="fen2">
					<l-starRate v-model="star3" :disabled="false"></l-starRate>
				</view>
				<view class="fen3">非常满意</view>
			</view>
		</view>
		
		<view class="neirongshru">
			<!-- isSingleSel:是否设置单选(默认false多选) colors:设置颜色  remarkList：标签数组 @tagClick：标签点击 -->
			<cc-multipleBtn :isSingleSel="false" :colors="colors" :remarkList="remarkList" @tagClick="tagsClick"></cc-multipleBtn>
		
			<view class="input_Textarea">
				<u-input v-model="NeiRong" :type="type" :border="border" :height="height2" :auto-height="autoHeight" placeholder="快来分享你的亲身体验，帮助更多用户做决策吧！" />
			</view>
			
			<view class="u-uploads">
				<u-upload :action="action" name="file" :file-list="fileList" upload-text="上传图片" max-count="9" :header="HeaDers" @on-success="Upsuccess3" @on-remove="Remove"></u-upload>
			</view>
		
		</view>
		
		<view style="height: 300rpx;"></view>
		
		<view class="bottom-btn-wrap">
			<view class="bottom-fixed-btn">
				<view class="btn pay">提交评价</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				star1: 1,
				star2: 1,
				star3: 1,
				colors: '#FF4E0D',
				remarkList: [{
					name: '食物口味赞'
				}, {
					name: '位置好找'
				}, {
					name: '商家服务好'
				}, {
					name: '停车方便'
				}, {
					name: '服务不错'
				}, {
					name: '等餐时间长'
				}, {
					name: '价格优惠低'
				}, {
					name: '其他原因'
				}],
				NeiRong: '',
				type: 'textarea',
				border: false,
				height2: 200,
				autoHeight: true,
				
				action: 'https://yh.laimeitong.com/api/feedback/uploadPicture',
				fileList: [],
				HeaDers: {
					'authorization': uni.getStorageSync('token')
				},
				fileLiatData3: [],
				FileList3: '', //首次验证身份证地址
			}
		},
		methods: {
			tagsClick(tagArr, arr) {
				// 选中数据有变化 重新赋值（可以兼容小程序）
				this.remarkList = arr;
			
				console.log("选中的标签  = ", JSON.stringify(tagArr));
			
			},
			Upsuccess3(e) {
				this.fileLiatData3.push(e.result.show_path);
				var filelist = this.fileLiatData3.join(",");
				this.FileList3 = filelist;
				console.log('上传的图', this.FileList3)
			},
			Remove(e) {
				this.fileLiatData3.splice(e, 1)
				//console.log('移除图片',e)
				var filelist = this.fileLiatData3.join(",");
				this.FileList3 = filelist;
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f4f4f4;
	}
	.neirongshru {
		background-color: #ffffff;
		padding: 30rpx 30rpx 30rpx 30rpx;
		border-radius: 24rpx;
	}
	.xingxing {
		background-color: #ffffff;
		padding: 30rpx;
		margin: 24rpx 0;
		border-radius: 24rpx;
		.xtitle {
			font-weight: bold;
			font-size: 30rpx;
		}
		.pingfen_box {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			margin-top: 24rpx;
			.fen1 {
				font-size: 28rpx;
				color: #999999;
			}
			.fen2 {
				margin: 0 20rpx;
			}
			.fen3 {
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
	.goods_info {
		background-color: #ffffff;
		padding: 20rpx;
		align-items: center;
		border-radius: 0;

		.goods_img {
			width: 144rpx;
			height: 144rpx;

			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 16rpx;
			}
		}

		.goods_name {
			padding-left: 16rpx;
			flex: 1;

			.shopname {
				font-weight: bold;
				font-size: 30rpx;
				color: $zzy-text-color-333333;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}

			.info_tags {
				margin-top: 6rpx;
			}

			.dizhizu {
				align-items: center;
				justify-content: space-between;
				font-size: 28rpx;
				color: $zzy-text-color-999999;
				flex: 1;
				margin-top: 18rpx;
				word-break: break-all;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
				overflow: hidden;
			}
		}
	}
	.u-uploads {
		
	}
</style>